<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    button[type='blue']{
      background: blue;
    }
    button[type='yellow']{
      background: yellow;
    }
    .container{
      width: 180px;
      background: #ccc;
      border: 1px solid skyblue;
      margin: 5px;
      list-style: none;
      float: left;
    }
    li{
      margin: 10px;
    }
    .first{
      display: flex;
      justify-content: space-between;
    }
    a{
      text-decoration: none;
      color: #f5f5f5;;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- <lxbutton type="blue">登录</lxbutton>
    <lxbutton type="yellow">注册</lxbutton>
    <lxbutton>
      <template #icon>+</template>
      登录
    </lxbutton> -->
    <lx-Ul :listdata="list">
      <template #left>
          歌手
      </template>
      <template #right>
          薛之谦
    </template>
    </lx-Ul>
    <lx-Ul :listdata="list">
      <template #left>
          歌手
      </template>
      <template #right>
          薛之谦
    </template>
    </lx-Ul>
    <lx-Ul :listdata="list">
      <template #left>
          歌手
      </template>
      <template #right>
          薛之谦
    </template>
    </lx-Ul>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    components:{
      lxbutton:{
        template : `
          <button>
            <slot name='icon'></slot>
            <slot></slot>
          </button>
        `
      },
      lxUl:{
        props:['listdata'],
        template:`
        <ul class="container">
          <div class="first">
            <div><slot name ='left'></slot></div>
            <div><slot name = 'right'></slot></div>
          </div>
      <li v-for="item in listdata"><a href="">{{item.id}}.{{item.name}}</a></li>
    </ul>
        `
      }
    },
    data() {
      return {
        list:[
          {
            id:1,
            name:'丑八怪'
          },
          {
            id:2,
            name:'演员'
          },
          {
            id:3,
            name:'天外来物'
          },
          {
            id:4,
            name:'意外'
          },
          {
            id:5,
            name:'摩天大楼'
          }
        ]
      }
    },
  })
</script>
</html>